<template>
  <div>
    <div style="display:flex;align-items: center;">
      <el-avatar
        :size="size"
        :src="circleUrl"
      ></el-avatar>
      <span style="font-size:16px;font-weight:bold;margin-left:6px;">{{userInfo.name}}</span>
      <span style="font-size:16px;">，{{getTimeState()}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "userInfo",
    computed: {
      userInfo() { return this.$store.getters.userInfo; },
    },
    data() {
      return {
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        sizeList: ["large", "medium", "small"],
        size: "small",
      }
    },
    methods: {
      getTimeState() {
        let timeNow = new Date();
        let hours = timeNow.getHours();
        let text = ``;
        if (hours >= 0 && hours <= 10) {
          text = `早上好`;
        } else if (hours > 10 && hours <= 14) {
          text = `中午好`;
        } else if (hours > 14 && hours <= 18) {
          text = `下午好`;
        } else if (hours > 18 && hours <= 24) {
          text = `晚上好`;
        }
        // console.log(`hours>>>>>`, hours);
        // console.log(`text>>>>`, text);
        return text;
      },
    },
  }
</script>

<style>

</style>